<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/lodash"></script>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/axios"></script>
    <!--  <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>-->
    <script src="https://unpkg.com/vue-amis-sdk/lib/vue-amis-sdk.umd.min.js"></script>
    <script src="https://unpkg.com/@fortawesome/fontawesome-free@5.15.3/js/all.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-amis-sdk/lib/vue-amis-sdk.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@fortawesome/fontawesome-free@5.15.3/css/all.css"
    />
  </head>
  <body>
    <div id="app">
      <vue-amis-sdk
        id="editorName"
        theme="cxd"
        className="is-fixed"
        :preview="isPreview"
        :isMobile="isMobile"
        @onChange="onChange"
        :value="schema"
      />
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          isPreview: false,
          isMobile: false,
          schema: {},
        };
      },
      components: {
        VueAmisSdk: window.VueAmisSdk,
      },
      created() {
        console.log(
          `vue-amis-sdk version: ${window.VueAmisSdk.version} by ${window.VueAmisSdk.author.name}`
        );
        document.title = `vue-amis-sdk version: ${window.VueAmisSdk.version} by ${window.VueAmisSdk.author.name}`;
      },
      methods: {
        onChange(e) {
          console.log(e);
        },
      },
    });
  </script>
</html>
